<template>
    <div>
        <p style="color:orange;font-size: 14px;">
            <i class="el-icon-s-promotion"></i>
            地产分类
        </p>
        <!-- 卡片 -->
        <CateList :list='cateList'></CateList>
    </div>
</template>
<script>
import { getCateList } from '@/api/category'
export default {
    data() {
        return {
            cateList: [],
            // 类别
            Type: []
        }
    },
    async created() {
        this.getCateList()
    },
    methods: {
        async getCateList() {
            let res = await getCateList()
            const arr = res.data
            // console.log(28,res.data);
            // 判断Type数组中是否已经存在此类型 
            arr.forEach(item => {
                if (item.category) {
                    let val = item.category.title
                    if (!this.Type.includes(val)) {
                        // 把分类追加进去
                        this.Type.push(item.category.title)
                        // 把类型添加进去
                        this.cateList.push(item.category)
                        // console.log('数据渲染',this.cateList);
                    }
                }else {
                    // console.log('item分类',item.category);
                    this.cateList=[{
                        image:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202001%2F17%2F20200117231331_3GwTW.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1673687463&t=f0eb77860bf5ecdcf068d36785bb9f85',
                        title:'未分类',
                        desc:'属于未分类项',
                        id:999
                    }]

                }
            })

        }
    }
}
</script>
<style scoped>
.text {
    font-size: 14px;
}

.item {
    padding: 18px 0;
}

.box-card {
    /* width: 480px; */
    margin-bottom: 10px;

}

.image {
    width: 200px;
    height: 200px;
    margin: 0 50px;
    object-fit: cover;
}

/* 间隔线 */
.el-divider--vertical {
    display: inline-block;
    height: 13em;
    margin: 0 8px;
    background: 0 0;
    border-left: 1px solid #EBEEF5;
    position: relative;
}
</style>